<template>
  <div class="login_container">
    登录页面
    <div class="login_box">
      <!--  登录表单区-->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login-form">
        <!--      用户名-->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!--      密码-->
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-password"
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!--      按钮-->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetloginForm">重置</el-button>
        </el-form-item>

      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    // 表单数据绑定对象
    return {
      loginForm: {
        username: '12345678',
        password: '12345678'
      },
      //表单验证规则
      loginFormRules: {
        //用户名验证规则
        username: [
          {required: true, message: '请输入用户名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        //密码验证规则
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    //重置表单按钮
    resetloginForm() {
      //this代表这个组件的实例，可以通过这个实例可以查看某个属性在哪里
      // console.log(this)
      // 获取实例的表单ref,然后调用表单的方法
      this.$refs.loginFormRef.resetFields()
    },
    //登录
    login() {
      //预验证结果判断 validate是vue 自带的预验证方法
      this.$refs.loginFormRef.validate(async valid => {
        //没通过验证
        if (!valid) return;
        //通过验证发起请求，通过axios,参数分别是请求地址,还有要发送的数据(相当于是request)，这里可以直接用data(){里的}
        //还要设置接收返回的消息相当于response
        // const result = this.$http.post('login', this.loginForm)
        // console.log(result)
        //可以看到result的具体内容，但太多我们不需要的，可以简化添加await(但它必须在async修饰下)
        // const result = await this.$http.post('/hospitalCardAnnotation/loginServlet', this.loginForm)
        // console.log(result)
        // 如果我们只要data就可以这样
        // const {data:res} = await this.$http.post('/hospitalCardAnnotation/loginServlet', this.loginForm)
        // console.log(res)
        const result = await this.$http.post('/hospitalCardAnnotation/loginServlet', this.loginForm);
        //从返回结果来判断是否登录成功
        console.log(result.data.status);
        console.log(result);
        console.log(result.data.token);
        if (result.data.status !== "200") return this.$message.error("账号或者密码有误！");
        this.$message.success("登录成功");
        //把接收到token保存到浏览器中
        window.sessionStorage.setItem("token", result.data.token)
        window.sessionStorage.getItem("token");

        console.log(window.sessionStorage.setItem("token", result.data.token))
        // 跳转到主页面
        this.$router.push("/home");
      })
    }

  }

}
</script>

<style lang="scss" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login-form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: white;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btns {
  display: flex;
  justify-content: flex-end;
}
</style>
